﻿@using ZhongKeSite.Entity
@model List<Dynatree>
@{
    ViewBag.Title = "权限设置";
    string JsonData = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
}
    <style>
        html {
            background-color: #fff;
        }

        .layui-card {
            box-shadow: none;
        }
    </style>
<div class="layui-card">
    <div class="layui-card-body">
        <div id="roletree" class="demo-tree demo-tree-more"></div>

        <div class="layui-container" style="margin:40px 0;">
            <button class="layui-btn layui-btn-sm" id="quanxuan">全选</button>
            <button class="layui-btn layui-btn-sm" id="fanxuan">反选</button>
        </div>

    </div>
</div>
<script>
    layui.use(['tree'], function () {
        var  layer = layui.layer
            ,form = layui.form
            //数据
            , data = window.eval('@Html.Raw(JsonData)');

        parent.tree = layui.tree

        //基本演示
        parent.tree.render({
            elem: '#roletree'
            , data: data
            , showCheckbox: true  //是否显示复选框
            ,id: 'treeId'
            , showLine: true
            , oncheck: function(obj){
                //console.log(obj.data); //得到当前点击的节点数据
                //console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                //console.log(obj.elem); //得到当前节点元素
              }
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
            }
        });

        //按钮事件
        $("#quanxuan").click(function(){//全选
            $("#roletree input[type='checkbox']").prop("checked",true);
            form.render('checkbox');
          })

      $("#fanxuan").click(function(){//反选
        $("#roletree input[type='checkbox']").each(function(){
          if($(this).prop("checked")){
            $(this).prop("checked",false);
          }else{
            $(this).prop("checked",true);
          }
        })
        form.render('checkbox');
      })

    });
</script>

